import { restService } from "@/apis/rest"
import { RootState } from "@/store"
import { ElMessage } from "element-plus"
import { Module } from "vuex"
import { IHomeActions, IHomeGetter, IHomeMutations, IHomeState } from "./types"

const state: IHomeState = {
    nav: {
        card: '',
        logo: '',
        title: '',
        titleColor: '',
        subTitle: '',
        subTitleColor: '',
        bgColor: '',
    },
    aside: {
        card: '',
        bgColor: '',
        deviceInfo: {
            card: '',
        },
        deviceControl: {
            card: '',
            directionIcon: '',
            circleIcon: '',
        },
        streamControl: {
            card: '',
            record: {
                type: 'default',
                text: '',
            },
            snapshot: {
                type: 'default',
                text: '',
            },
        }
    },
    navOpts: {
        cardTitle: '导航栏',
        title: {
            label: '标题：',
            labelWidth: '100px',
            placeholder: '请输入导航栏标题'
        },
        titleColor: {
            label: '标题颜色：',
            labelWidth: '100px',
            placeholder: '请输入导航栏标题颜色'
        },
        subTitle: {
            label: '副标题：',
            labelWidth: '100px',
            placeholder: '请输入导航栏副标题'
        },
        subTitleColor: {
            label: '副标题颜色：',
            labelWidth: '100px',
            placeholder: '请输入导航栏副标题颜色'
        },
        logo: {
            label: 'Logo：',
            labelWidth: '100px',
            placeholder: '请选择Logo图片'
        },
        bgColor: {
            label: '背景色：',
            labelWidth: '100px'
        }
    },

    asideOpts: {
        cardTitle: '侧边栏',
        self: {
            card: {
                colSpan: 24,
                label: '侧边栏标题：',
                labelWidth: '100px',
                placeholder: '请输入侧边栏标题'
            },
            bgColor: {
                colSpan: 24,
                label: '侧边栏背景色：',
                labelWidth: '120px',
            }
        },
        deviceInfo: {
            card: {
                colSpan: 24,
                label: '设备信息：',
                labelWidth: '100px',
                placeholder: '请输入设备信息卡片标题'
            },
        },
        deviceControl: {
            card: {
                colSpan: 24,
                label: '设备控制：',
                labelWidth: '100px',
                placeholder: '请输入设备控制卡片标题'
            },
            directionIcon: {
                colSpan: 24,
                label: '方向控制图标：',
                labelWidth: '120px',
                placeholder: '请输入设备控制图标'
            },
            circleIcon: {
                colSpan: 24,
                label: '圆形控制图标：',
                labelWidth: '120px',
                placeholder: '请输入设备控制图标'
            },
        },
        streamControl: {
            card: {
                colSpan: 24,
                label: '视频流流控制：',
                labelWidth: '120px',
                placeholder: '请输入视频流控制卡片标题'
            },
            record: {
                type: {
                    colSpan: 24,
                    label: '录制按钮类型：',
                    labelWidth: '120px',
                    placeholder: '请选择录制按钮类型',
                    opts: [
                        { label: '默认', value: 'default' },
                        { label: '普通', value: 'primary' },
                        { label: '成功', value: 'success' },
                        { label: '警告', value: 'warning' },
                        { label: '危险', value: 'danger' },
                        { label: '信息', value: 'info' },
                    ]
                },
                text: {
                    colSpan: 24,
                    label: '录制按钮文本：',
                    labelWidth: '120px',
                    placeholder: '请输入录制按钮文字'
                },
            },
            snapshot: {
                type: {
                    colSpan: 24,
                    label: '截图按钮类型：',
                    labelWidth: '120px',
                    placeholder: '请选择截图按钮类型',
                    opts: [
                        { label: '默认', value: 'default' },
                        { label: '普通', value: 'primary' },
                        { label: '成功', value: 'success' },
                        { label: '警告', value: 'warning' },
                        { label: '危险', value: 'danger' },
                        { label: '信息', value: 'info' },
                    ]
                },
                text: {
                    colSpan: 24,
                    label: '截图按钮文本：',
                    labelWidth: '120px',
                    placeholder: '请输入截图按钮文字'
                },
            },
        }
    }
}

const actions: IHomeActions = {
    submit({ state, commit }) {
        const data = {
            nav: {
                title: state.nav.title,
                titleColor: state.nav.titleColor,
                subTitle: state.nav.subTitle,
                subTitleColor: state.nav.subTitleColor,
                logo: state.nav.logo,
                bgColor: state.nav.bgColor
            },
            aside: {
                bgColor: state.aside.bgColor,
                deviceTitle: state.aside.deviceInfo.card,
                deviceControlTitle: state.aside.deviceControl.card,
                streamControlTitle: state.aside.streamControl.card,
                recordText: state.aside.streamControl.record.text,
                recordType: state.aside.streamControl.record.type,
                snapshotText: state.aside.streamControl.snapshot.text,
                snapshotType: state.aside.streamControl.snapshot.type,
            }
        }
        commit('_onSubmit', {
            url: '/home',
            data
        })
    }
}

const mutations: IHomeMutations = {
    async _onSubmit(state, data) {
        const res = await restService('website', data).update();
        if (res) {
            ElMessage.success('修改成功！')
        }
    },
    async _initWebsite(state) {
        const { data } = await restService('website').get();
        if (data) {
            state.nav = {
                title: data.nav.title,
                titleColor: data.nav.titleColor,
                subTitle: data.nav.subTitle,
                subTitleColor: data.nav.subTitleColor,
                logo: data.nav.logo,
                bgColor: data.nav.bgColor
            }
            state.aside = {
                bgColor: data.aside.bgColor,
                deviceInfo: {
                    card: data.aside.deviceTitle
                },
                deviceControl: {
                    card: data.aside.deviceControlTitle,
                },
                streamControl: {
                    card: data.aside.streamControlTitle,
                    record: {
                        text: data.aside.recordText,
                        type: data.aside.recordType,
                    },
                    snapshot: {
                        text: data.aside.snapshotText,
                        type: data.aside.snapshotType,
                    },
                }
            }
        }
    }

}
const getters: IHomeGetter = {}

export const home: Module<IHomeState, RootState> = {
    namespaced: true,
    state,
    actions,
    mutations,
    getters,
}
